<template>
  <div class="app-container">
    <!-- 左侧固定菜单 -->
    <Aside @toggle-collapse="isCollapsed = $event"></Aside>
    
    <!-- 右侧主区域 -->
    <div class="main-content" :style="{ 'margin-left': isCollapsed ? '64px' : '220px' }">
      <!-- 固定Header -->
      <Header></Header>
      
      <!-- 可滚动内容区 -->
      <div class="scroll-container">
        <div class="content-area">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isCollapsed = ref(false);
</script>

<style>
/* 全局样式 */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 禁用全局滚动 */
}

/* 整体布局 */
.app-container {
  display: flex;
  height: 100vh;
}

/* 左侧菜单 - 固定定位 */
.aside-container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  transition: width 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

/* 右侧主区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
  height: 100vh;
    margin-left: 64px;
    width: calc(100vw - 64px);
}

.el-menu-vertical-demo {
    pointer-events: auto;
}

/* Header样式 */
.header {
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0; /* 防止被压缩 */
}

/* 滚动容器 */
.scroll-container {
  flex: 1;
  overflow-y: auto; /* 启用滚动 */
  position: relative;
}

/* 内容区域 */
.content-area {
  padding: 20px;
  min-height: calc(100% - 40px); /* 至少充满容器 */
}
</style>